CONS: Who says "movie" of a 4 minute video, this guy's vocabulary is mad.

PROS:
Was he good? Yes, he is good THE COURSE IS GOOD.
He does not overwhelm you with jack tons of completely miniscule details of every single feature a language has. The course is "Javascript ESSENTIAL" and the title wasn't a LIE! You genuinely learn the essential concepts so at the end of the course, you finally get things now.

There are mini exercises that proves and test if you genuinely understood what he was saying. Every coding exercises are in the context of what he taught in that specific and a mix of preceding chapters.

He uses ANALOGY and VISUAL representations at time

The only difference between the two is when the JS file is executed

• async (after JS Downloaded)
• defer (after both HTML parsed and js downloaded)

Now to get this to work in practice, you have to do one more thing.
Inside index.html, you need to tell the browser,

• first of all there are two files now.
• And second of all, these two files on our modules, they may rely on each other and it's important that they're both loaded before things work properly.
  Setting the type attributes to module, both files automatically get deferred
  So modules only run after everything else has happened to ensure that the browser has all the modules available before anything gets rendered out. (Comment: Makes sense)

// Arrow function with single parameter and single expression
const double = x => x * 2;

// Equivalent traditional function expression
const double = function(x) {
    return x * 2;
};
Copy

// Arrow function with multiple parameters and block of code
const sum = (a, b) => {
    num = a + b
    return num;
};

// Equivalent traditional function expression
const sum = function(a, b) {
    num = a + b
    return a + b;
};
Copy

// Arrow function with no parameters
const getCurrentYear = () => new Date().getFullYear();

// Equivalent traditional function expression
const getCurrentYear = function() {
    return new Date().getFullYear();
};
Copy

NEW BETTER WAY

document.querySelector() // Returns the HTML snippet code
document.querySelectorAll() // Returns a NodeList (A node list containing each element object matching the query.)
Copy

Old way of getting element

document.getElementsByClassName() // Receives a string of classnames to be found as its parameter. 
document.getElementById()
Copy

innerHTML vs outerHTML
inner basically is what's inside of the element tag
outer includes the element tag, for instance

• document.querySelector("ul").innerHTML // <ul> tag is EXcluded
• document.querySelector("ul").outerHTML // ul tag is INCLUDED

A common task in JavaScript is to modify the classes of an element in some way.
This is a simple way of without having to inject CSS into the HTML itself.

• changing the appearance (hiding and showing a panel)
• or behavior of an element (highlighting a button)
  Instead, we just
• add a class
• or remove a class

Need to pass data from one element to the other?

• Add a data attribute.

Need to change the appearance of a specific element for some reason?

• Add an inline style.

Modify, Add, Change, etc.. etc...
document.querySelector("site.title").style
document.querySelector("site.title").style.backgroundColor = "pink"

a = b assigns the value of b to a.
a == b tests for equality between a and b.
STRICT: a === b tests for identical equality (checks if same data type) between a and b.

Function declaration is hoisted to the to the top of their containing scope during the compilation phase.
This means you can call a function before it's declared in the code. However, this hoisting behavior applies to the scope in which the function is declared, not necessarily the global scope.

console.log(myFunction()); 
// ^--- This works, even though myFunction is called before its declaration

function myFunction() {
    return "Hello, world!";
}
Copy

• myFunction() is called before its declaration in the code.
• However, because function declarations are hoisted during the compilation phase, myFunction() is available to be called from anywhere in the same scope, including before its actual declaration.
• In JavaScript, during the compilation phase, all function declarations are hoisted to the top of their containing scope, meaning they are parsed and made available before any actual code execution occurs. This allows you to call functions anywhere in your code, even before their actual declarations

How Javascript compiles code

So just like a VAR,
If you create a new function and use the same name, that new function will take precedence further down in the code.
So you can accidentally override an existing function if you're using function declarations.

function myFunction() {
    console.log("First declaration");
}
myFunction(); // Output: "Second Declaration"

function myFunction() {
    console.log("Second declaration");
}
// Calling the function
myFunction(); // Output: "Second declaration"
Copy

const getRectArea = function (width, height) {
  return width * height;
};
Copy

So if we're using a const to store the function expression,

• then it is locally scoped or block scoped automatically.
• also cannot be re-declared
• not hoisted, exists only in the scope they were created (facilitated by const)
• typically uses Anonymous Functions
  Allows default values in the parameters

In an IFE, we wrap an

• anonymous function
• or a name function
  inside parentheses

It's immediately invoked and run as soon as the browser encounters it.
Runs the function immediately without calling it

IIFE - MDN Web Docs Glossary: Definitions of Web-related terms | MDN (mozilla.org)

Shortcut of Declaring a Function Expression
Arrow function expressions - JavaScript | MDN (mozilla.org)

Remember, we're saying "SHORTCUT" of Function Expression
Meaning anything that's on arrow function will not be HOISTED

PROBLEM: this keyword of a function inside of a function
Earlier, we saw that this keyword used when we created an object constructor and you may remember, this keyword can be used inside any object to refer back to the object itself. So what's happening here is this function is hoisted out of the object and up to the global scope.

SOLUTION: Arrow function
An arrow function does not have its own this
It does not know what this means
--> and it will refer to the closest available scope which in this case is the object.

This also explains why we can't use an arrow function as the declaration for a method,
because if we did that, the arrow function wouldn't know what scope to use.
So it would refer back to the global scope instead of the method scope and therefore nothing would work properly inside that arrow function.

for of

for (const item of items) {
    // code here
}
Copy

array.forEach(arg: anon-arrow-function)

items.forEach(
    (item) => {
        // code here
    } 
)
Copy

for in

for (const singleObject in nestedObjects) {
  // code here
}
Copy

Fuck this is confusing, I'll probably learn this a long the way

const btn = document.querySelector("button");

const lidToggle = (arg1) => {
    return arg1;
}
btn.addEventListener("click", lidToggle)
Copy